<template>
    <div class="top-container">
        <div class="left" @click="changeFold">
            <el-icon class="Icon">
                <component :is="foldStore.fold ? 'Fold' : 'Expand'"></component>
            </el-icon>
            <el-breadcrumb separator-icon="ArrowRight" class="breadcrumb">
                <el-breadcrumb-item v-for="item in $route.matched" :to="item.path" v-show="item.meta.title">
                    <span>{{ item.meta.title }}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="right">
            <el-button icon="FullScreen" circle @click='makeFullScreen'></el-button>
            <el-button icon="Refresh" circle @click="makeRefresh"></el-button>
            <el-button icon="Setting" circle></el-button>
            <el-dropdown style="margin-left: 12px">
                <span style="cursor: pointer;" class="el-dropdown-link">
                    <span>{{  userStore.adminName }}</span>
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>退出登录</el-dropdown-item>

                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref,nextTick, } from 'vue'
import { useRouter, useRoute } from "vue-router"
import { changeLayout } from "@/stores/modules/changeLayout/index.ts"
import { store } from '@/stores/modules/user/user';
let $route = useRoute()
let $router = useRouter();

//仓库
let userStore = store()
let foldStore = changeLayout()
//左导航折叠扩展
const changeFold = () => {
    foldStore.fold = !foldStore.fold
}
//全屏模式
let fullScreen = ref<boolean>(false)
const makeFullScreen =()=>{
    
    fullScreen.value = !fullScreen.value
    fullScreen.value?document.documentElement.requestFullscreen():document.exitFullscreen()
}
//刷新模式
const makeRefresh = ()=>{
    foldStore.refresh = !foldStore.refresh
}

</script>

<style lang="scss" scoped>
.el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    outline: none;
}

.top-container {
    width: 100%;
    height: 100%;
    display: flex;
}

.breadcrumb {
    margin-left: 12px;
}

.left {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 10px;
    justify-content: end;
}
</style>